<template>
    <div class="kefuform">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Questions Form
            </div>
        </div>
        <!-- 表单 -->
        <van-form @submit="onSubmit">


            <van-field readonly clickable name="type" :value="value" label="type" placeholder="type"
                @click="showPicker = true" />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker confirm-button-text="confirm" cancel-button-text="cancel" show-toolbar :columns="colums"
                    @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>


            <!-- <van-field rows="2" type="textarea" maxlength="50" class="content" v-model="f.model.content" name="content"
                label="content" placeholder="content" :rules="[{ required: true, message: 'content' }]" />
 -->

            <van-field v-model="f.model.content" rows="2" autosize label="content" type="textarea"
                placeholder="Please enter feedback content" show-word-limit
                :rules="[{ required: true, message: 'content' }]" />


            <van-field name="upload picture" label="upload picture">
                <template #input>
                    <van-uploader v-model="uploade" :after-read="afterRead" />
                </template>
            </van-field>
            <!-- 按钮 -->
            <van-button class="kefuBtn" type="submit">Submit</van-button>
        </van-form>
    </div>
</template>
<script>
import { setfk, scFile, getfankuiList } from "../../api";
import { jiami, jiemi } from "../../utils/aeskey.js";
import { Toast } from "vant";
export default {
    data() {
        return {
            f: {
                model: {
                    typedId: 'WYMFA',
                    content: '',
                    images: [],
                    thirdOederId: ''
                }
            },
            uploade: [],
            //类型数组
            colums: [],
            typeList: [],
            showPicker: false,
            value: ''
        }
    },
    methods: {
        //提交反馈
        async onSubmit() {
            this.f.model.thirdOederId = this.$store.state.orderId
            console.log(this.f)
            const res = await setfk(jiami(this.f))
            console.log(jiemi(res.data), '提交反馈的结果')
            Toast('Response Success')
            this.$router.push('/kefu')
        },
        //图片上传完时
        async afterRead(file) {
            const result = await this.photoZip(file.file)
            debugger
            const res = await scFile(result)
            console.log(jiemi(res.data))
            const url = jiemi(res.data).model.ossUrl
            this.f.model.images.push(url)
        },
        //获取用户返回类型列表
        async getfkList() {
            const r = { id: '' }
            r.id = this.$store.state.orderId
            const res = await getfankuiList(jiami(r))
            console.log(jiemi(res.data), '反馈类型列表')
            this.typeList = jiemi(res.data).list
            this.colums = this.typeList.map(item => item.curName)
        },
        //当选择完类型时触发
        onConfirm(value) {
            //给选中的赋值id
            const index = this.typeList.filter(item => item.curName === value)
            this.f.model.typedIId = index[0].id
            this.value = value;
            this.showPicker = false;
        },
        async photoZip(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                    const base64 = reader.result;
                    const img = new Image();
                    img.src = base64;
                    img.onload = () => {
                        const canvas = document.createElement('canvas');
                        const context = canvas.getContext('2d');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        context.drawImage(img, 0, 0);
                        const quality = 0.7;
                        const maxWidth = 800;
                        const maxHeight = 800;
                        let newBase64 = canvas.toDataURL('image/jpeg', quality);
                        console.log(newBase64.length / 1024, '11111111111111')
                        while (newBase64.length / 1024 > 100) {
                            canvas.width *= 0.9;
                            canvas.height *= 0.9;
                            context.drawImage(img, 0, 0, canvas.width, canvas.height);
                            newBase64 = canvas.toDataURL('image/jpeg', quality);
                        }
                        const blob = this.dataURLtoBlob(newBase64);
                        const newFile = new File([blob], file.name, { type: 'image/jpeg' });
                        console.log(newBase64.length / 1024, '33333333')
                        // 返回file对象格式
                        resolve({ file: newFile, content: newBase64, message: '', status: '' });
                    }
                }
                reader.onerror = reject;
            }
            );
        },

        dataURLtoBlob(dataURL) {
            const arr = dataURL.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bstr = atob(arr[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
    },
    created() {
        this.getfkList()
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}
</script>

<style lang="less",scoped>
@a: 3.75vw;

.kefuform {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (60/@a);

    box-sizing: border-box;

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (110/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

    .content {
        height: (50/@a) !important;
    }

    .kefuBtn {
        width: (232/@a);
        height: (44/@a);
        background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
        border-radius: (10/@a);
        margin-top: (20/@a);
        margin-left: (70/@a);
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: (18/@a);
        color: #FFFFFF;
    }
}
</style>